---
title: 번들 크기 분석
description: '`rollup-plugin-visualizer`를 사용하여 Astro에서 생성된 번들을 분석하는 방법을 알아봅니다.'
i18nReady: true
type: recipe
---

import { Steps } from '@astrojs/starlight/components';
import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro';

사이트 성능을 개선하려면 Astro 번들의 구성 요소를 이해하는 것이 중요합니다. 번들을 시각화하면 번들 크기를 줄이기 위해 프로젝트에서 변경할 수 있는 위치에 대한 단서를 얻을 수 있습니다.

## 레시피

[`rollup-plugin-visualizer` 라이브러리](https://github.com/btd/rollup-plugin-visualizer)를 사용하면 Rollup 번들을 시각화하고 분석하여 어떤 모듈이 공간을 차지하는지 확인할 수 있습니다.
<Steps>
1. `rollup-plugin-visualizer`를 설치합니다:

    <PackageManagerTabs>
        <Fragment slot="npm">
        ```shell
        npm install rollup-plugin-visualizer --save-dev
        ```
        </Fragment>
        <Fragment slot="pnpm">
        ```shell
        pnpm add rollup-plugin-visualizer --save-dev
        ```
        </Fragment>
        <Fragment slot="yarn">
        ```shell
        yarn add rollup-plugin-visualizer --save-dev
        ```
        </Fragment>
    </PackageManagerTabs>

2. `astro.config.mjs` 파일에 플러그인을 추가합니다:

    ```js
    // @ts-check
    import { defineConfig } from 'astro/config';
    import { visualizer } from "rollup-plugin-visualizer";

    export default defineConfig({
    vite: {
        plugins: [visualizer({
            emitFile: true,
            filename: "stats.html",
        })]
    }
    });
    ```
3. 빌드 명령을 실행합니다:

    <PackageManagerTabs>
        <Fragment slot="npm">
        ```shell
        npm run build
        ```
        </Fragment>
        <Fragment slot="pnpm">
        ```shell
        pnpm build
        ```
        </Fragment>
        <Fragment slot="yarn">
        ```shell
        yarn build
        ```
        </Fragment>
    </PackageManagerTabs>

4. 프로젝트의 `stats.html` 파일을 찾습니다.

		완전히 정적인 사이트의 경우 `dist/` 디렉터리의 루트에 위치하며 번들에 무엇이 포함되어 있는지 확인할 수 있습니다.
				
		Astro 프로젝트가 온디맨드 렌더링을 사용하는 경우 두 개의 `stats.html` 파일을 가지게 됩니다. 하나는 클라이언트용이고 다른 하나는 서버용이며, 각각 `dist/client` 및 `dist/server/` 디렉터리의 루트에 위치합니다.
				
		이러한 파일을 해석하거나 특정 옵션을 구성하는 방법에 대한 지침은 [Rollup Plugin Visualizer 문서](https://github.com/btd/rollup-plugin-visualizer#how-to-use-generated-files)를 참조하세요.
		
</Steps>

:::note
하이드레이션에 대한 Astro의 독특한 접근 방식을 고려할 때, 이 빌드가 반드시 클라이언트가 받게 될 번들을 나타내지는 않습니다.

Rollup visualizer는 사이트 전체에서 사용되는 모든 종속성을 표시하지만, 페이지별로 번들 크기를 세분화하지는 않습니다.
:::